import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { delitasAPI, shopcartAPI } from "./services/products";
import { useLocation } from "react-router-dom";
import { NavBar ,Button,Toast} from "antd-mobile";
function Drugdeltias() {
  const back = () => {
    history.back();
  };
  const location = useLocation();
  const [delitas, useDelitas] = useState([]);
/*   console.log(location.state); */
  useEffect(() => {
    delitasAPI(location.state).then((res: any) => {
      /* @ts-ignore */

      useDelitas([res.data]);
    });
  }, []);
  // console.log(delitas);
  return (
    <>
      <div className="dtheader">
        <NavBar onBack={back}>详情页</NavBar>
      </div>
      <div className="delitas">
        {delitas.map((item: any) => (
          <div key={item.id}>
            <img src={item.image} alt="" />
            <span>{item.name}</span>
            <strong>价格为：{item.price}</strong>
            <Button color="primary" onClick={async () => {
                  const jia = await shopcartAPI({ amount: 1, medicine: item.id, prcie: item.price })
                  if(jia.success){
                    Toast.show({
                      icon: 'success',
                      content: '加入购物车成功'
                    })
                  }else{
                    Toast.show({
                      icon: 'fail',
                      content: '加入购物车失败'
                    })
                  }
                }} >加入购物车</Button>
            <div dangerouslySetInnerHTML={{ __html: item.content }}></div>
          </div>
        ))}
      </div>
    </>
  );
}

export default Drugdeltias;
